/// 页面 * 弹框

<template>
  <Page>
    <component :is="() => ''" />
    <ExDialog v-model:visible="dialog.visible" title="标题" nofooter>
      <ExModal :width="400" :footer="footerView">
        <div>Darwin</div>
        <div>Darwin</div>
        <div>Darwin</div>
        <div>Darwin</div>
        <div>Darwin</div>
        <div>Darwin</div>
        <div>Darwin</div>
        <div>Newton</div>
        <div>Newton</div>
        <div>Newton</div>
        <div>Newton</div>
        <div>Newton</div>
        <!-- <template #footer>
          <div>Darwin2</div>
        </template> -->

        <button
          @click="
            () => {
              footerValue++
              if (footerValue === footerValues.length) {
                footerValue = 0
              }
            }
          "
        >
          footer change
        </button>
      </ExModal>
    </ExDialog>
    <button @click="open"> open </button>
    {{ `${footerView}` }}
  </Page>
</template>

<script setup lang="ts">
import { openDialog } from '@expresso/plus'

const dialog = useDialog<{ id1: string }>()

const footerValues = ['Footer', null, false, true, 100, void 0]
const footerValue = ref(0)
const footerView = computed(() => {
  return footerValues[footerValue.value]
})

const open = () => {
  openDialog(dialog, {
    params: {
      id1: 'xxx',
    },
  })
}
</script>

<style scoped lang="scss"></style>
